import 'dart:ui';

import 'package:flutter/material.dart';

class TabViewPage extends StatefulWidget {
  const TabViewPage({super.key});

  @override
  State<TabViewPage> createState() => _TabViewPageState();
}

class _TabViewPageState extends State<TabViewPage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;
  final List<Widget> titles = [
    const Tab(child: Text("关注")),
    const Tab(child: Text("热门")),
    const Tab(child: Text("资讯")),
    const Tab(child: Text("篮球")),
    const Tab(child: Text("动漫")),
    const Tab(child: Text("动画片")),
    const Tab(child: Text("电影")),
    const Tab(child: Text("电视剧")),
  ];
  final List<Widget> pages = [
    const ListTile(
      title: Text("我是关注列表"),
    ),
    const ListTile(
      title: Text("我是热门列表"),
    ),
    const ListTile(
      title: Text("我是资讯列表"),
    ),
    const ListTile(
      title: Text("我是篮球列表"),
    ),
    const ListTile(
      title: Text("我是动漫列表"),
    ),
    const ListTile(
      title: Text("我是动画片列表"),
    ),
    const ListTile(
      title: Text("我是电影列表"),
    ),
    const ListTile(
      title: Text("我是电视剧列表"),
    ),
  ];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _tabController = TabController(length: 8, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white,
          elevation: 0.5,
          title: const Text("多页面2"),
        ),
        body: Column(
          children: [
            TabBar(
              tabAlignment: TabAlignment.start,
              controller: _tabController,
              dividerColor: Colors.grey,
              indicatorWeight: 4,
              // indicatorPadding: const EdgeInsets.only(bottom: 10),
              //这是用来获取Controller
              isScrollable: true,
              //设置菜单栏是可以滑动自适应的，如果不写这个那么Tab多了文字就会只有一个字，因为都挤在一起了
              labelColor: Colors.red,
              //设置选中的菜单栏的文字颜色
              unselectedLabelColor: Colors.black,
              //设置未选中的文字颜色
              indicatorColor: Colors.red,
              //设置选中的指示器颜色
              indicatorSize: TabBarIndicatorSize.label,
              //设置导航栏的类型 label还有，
              // padding: const EdgeInsets.all(5),
              // indicator: BoxDecoration(
              //     //设置导航背景颜色 和圆角矩形
              //     color: Colors.red,
              //     borderRadius: BorderRadius.circular(50)),
              labelStyle: const TextStyle(
                  //设置选中的文字字号大小
                  fontSize: 16,
                  fontWeight: FontWeight.bold),
              unselectedLabelStyle: const TextStyle(
                  //设置未选中的文字字号大小
                  fontSize: 16),
              tabs: titles,
            ),
            Expanded(
              flex: 1,
              child: TabBarView(
                //菜单栏点击显示的界面 它的数量也要和_tabController长度一样
                controller: _tabController,
                children: pages,
              ),
            ),
          ],
        ));
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _tabController.dispose();
    print("home销毁了");
  }
}
